<template>
    <div id="getBackPassword" class="loginRegister">
        <header class="header">
            <i class="iconfont icon-zuojiantou" @click="$router.back(-1)"></i>
            <h1>找回密码</h1>
        </header>
        <form id="getBackPasswordForm">
            <div class="loginRegister_frame">
                <div class="input_list">
                    <i class="iconfont icon-zhanghao"></i>
                    <input type="text" name="accountTxt" v-model="accountTxt" placeholder="手机号／邮箱" readonly />
                </div> 
                <div class="parentDiv">
                    <div class="input_list">
                        <i class="iconfont icon-yanzhengma"></i>
                        <input type="text" name="codeTxt" placeholder="验证码" />
                    </div> 
                    <a href="javascript:;" class="get_code" @click="getCode($event)">获取验证码</a>
                </div>
                <div class="input_list">
                    <i class="iconfont icon-mima"></i>
                    <input type="password" v-model="newPassword" name="newPassword" placeholder="新密码（6-16位字母、数字、特殊字符）" />
                    <i class="iconfont icon-yincangmima" v-show="newPassword" id="isVisible" @click="isPasswordVisible($event)"></i>
                </div>                 
            </div>
            <div class="loginRegister_btn">
                <button type="button" class="submit_btn" @click="submitForm('#getBackPasswordForm')">完成</button>
            </div>
        </form>
        <div class="error_warning">
            <span class="error_txt">
                账号不能为空
            </span>
        </div>    
    </div>
</template>

<script>
export default {
    name: 'getBackPassword',
    data() {
        return {
            "isVisible": false,   //密码不可见
            "accountTxt": this.$route.query.account,
            "isFlag": true, //定时器开关
            "newPassword": ''
        }
    },
    created() {
        
    },
    mounted() {
        console.log()
    },
    methods: {
        //密码是否可见
        isPasswordVisible(event) {
            var el = event.currentTarget;
            if(this.isVisible) {
                $(el).removeClass('icon-xianshimima').addClass('icon-yincangmima').prev('input').attr('type','password');                
            }else {
                $(el).removeClass('icon-yincangmima').addClass('icon-xianshimima').prev('input').attr('type','text'); 
            }
            this.isVisible = !this.isVisible;
        },
        //提交form
        submitForm(obj) {
            var $account = $(obj).find('input[name="accountTxt"]'),
                $password = $(obj).find('input[name="newPassword"]'),
                $code = $(obj).find('input[name="codeTxt"]'),
                accountTxt = $.trim($account.val()),
                passwordTxt = $.trim($password.val()),
                codeTxt = $.trim($code.val());
            if(accountTxt == '') {
                this.utils.errorWarning('账号不能为空');
                return false;
            }
            if(codeTxt == '') {               
                this.utils.errorWarning('验证码不能为空');
                return false;
            }
            if(passwordTxt == '') {
                this.utils.errorWarning('新密码不能为空');
                return false;
            }
            var passwordReg = this.utils.passwordReg;  //密码正则
            if(!passwordReg.test(passwordTxt)) {
                this.utils.errorWarning('密码规则（6-16位字母、数字、特殊字符）');
                return false;
            }       
        },
        //获取验证码
        getCode(event) {
            if(!this.isFlag) {
                return;
            }
            this.isFlag = false;
            var el = event.currentTarget,
                second = 59,
                that = this;
            $(el).html('重新获取（59s）');
            var timer = setInterval(function(){
                if(second == 1) {
                    clearInterval(timer);
                    that.isFlag = true;
                    $(el).html('获取验证码');
                }else {
                    second--;
                    $(el).html('重新获取（'+second+'s）');
                }                
            }, 1000)   
        }
    }
}
</script>

<style lang="scss" scoped>
#getBackPasswordForm {
    padding-top: 1.82rem;
    margin: 0 .533333rem; 
}
.loginRegister_frame {
    padding-bottom: 20px;
    .parentDiv {
        display: flex;
        justify-content: space-between;
        .input_list {
            margin-right: .8rem;
        }  
        .get_code {
            border: 1px solid #414568;
            border-radius: 4px;
            white-space: nowrap;
            padding: .213333rem 0;
            width: 5.333333rem;
            text-align: center;
            color: #414568;
            line-height: .586667rem;
            height: 1.013333rem;
            &:hover, &:visited {
                text-decoration: none;
            }
        }
    }
    .input_list {
        background: #fff;
        margin: 0 0 .533333rem;
        border-radius: .213333rem;
        padding: .213333rem .32rem;
        display: flex;
        height: 1.066667rem;
        i.iconfont {
            padding-right: 10px;
            border-right: 1px solid #414568;
            &:before {
                margin-top: -2px;
                display: block;
            }
            &#isVisible {
                top: .266667rem;
            }
        }
    }
}
input[type=password]::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: .373333rem;
}
</style>
